import React, { FC, useEffect, useRef } from "react";
import * as echarts from "echarts";
import { EChartsOption, EChartsResponsiveOption } from "echarts";
import { getWeekday } from "@/utils/time";
import { lineColorList } from "@/constant";
import type { OnlineRatePropsType } from "@/types/echartInterface";
const LineChart: FC<OnlineRatePropsType> = (props: OnlineRatePropsType) => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  const { legendList = [], seriesList = [], xData = [], lineStyle } = props;

  useEffect(() => {
    // Initialize the chart
    const chartInstance = echarts.init(chartRef.current!);

    const series: echarts.SeriesOption[] | undefined = seriesList.map(
      (item, index) => {
        return {
          name: item.name,
          type: "line",
          smooth: true,
          showAllSymbol: true,
          symbol: "circle",
          symbolSize: 12,
          lineStyle: {
            color: lineColorList[index],
          },
          itemStyle: {
            color: lineColorList[index],
            borderWidth: 3,
            borderColor: "#f3f3f3",
          },
          data: item.data,
        };
      }
    );
    const options: EChartsOption = {
      backgroundColor: "#fff",
      title: {
        textStyle: {
          rich: {
            a: {
              fontSize: 16,
              fontWeight: 600,
            },
          },
        },
        top: "2%",
        left: "2%",
      },
      legend: {
        data: legendList,
        textStyle: {
          align: "right",
        },
        top: "2%",
        right: "2%",
      },

      tooltip: {
        trigger: "axis",
      },

      grid: {
        top: "18%",
        left: "8%",
        right: "3%",
        bottom: "20%", // Adjusted to leave space for the dataZoom component
      },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            margin: 10,
            formatter: (value: string) => {
              const weekday = getWeekday(value);
              return `${value}\n${weekday}`;
            },
          },
          boundaryGap: false,
          data: xData,
        },
      ],

      yAxis: [
        {
          type: "value",
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: xData.length > 0,
            lineStyle: {
              color: "#e3e3e3",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 20,
            formatter: "{value} %",
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: series,
      graphic: {
        type: "text",
        left: "center",
        top: "middle",
        silent: true,
        invisible: xData.length != 0,
        style: {
          fill: "#ccc",
          fontWeight: "bold",
          text: "暂无数据",
          fontSize: "15px",
        },
      },
      dataZoom: [
        {
          show: xData.length >= 20, // 为true 滚动条出现
          realtime: true,
          type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          startValue: 0, // 表示默认展示20%～80%这一段。
          endValue: 6,
          right: "2%",
          left: "2%",
          bottom: "1%", //位置和grid配置注意下
          height: 1,
          xAxisIndex: 0, //关联多个y轴
          moveHandleStyle: {
            color: "#3CAAB7",
          },
          moveHandleSize: 1,
          emphasis: {
            moveHandleStyle: {
              color: "#3CAAB7",
            },
          },
          textStyle: {
            color: "rgba(255,255,255,0)",
          },
          backgroundColor: "#00000000",
          borderColor: "rgba(255,255,255,0)",
          fillerColor: "rgba(0,0,0,0)",
          handleSize: "0",
          handleStyle: {
            color: "rgba(255,255,255,0)",
          },
          brushStyle: {
            color: "rgba(129, 243, 253)",
          },
        },
        {
          //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          xAxisIndex: 0,
          zoomOnMouseWheel: true, //滚轮是否触发缩放
          moveOnMouseMove: false, //鼠标滚轮触发滚动
          moveOnMouseWheel: true,
        },
      ],
    };

    // Use the specified options
    chartInstance.setOption(options as EChartsResponsiveOption);
    const resizeChart = () => {
      chartInstance.resize();
    };
    window.addEventListener("resize", resizeChart);
    // Cleanup chart instance on component unmount
    return () => {
      window.removeEventListener("resize", resizeChart);
      chartInstance.dispose();
    };
  }, [legendList, seriesList, xData]);

  return <div ref={chartRef} style={lineStyle} />;
};

export default LineChart;
